export const generateRichEmailTemplate = (
  email: string,
  code: string,
): string => {
  return `
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Email Template</title>
            <style>
                .notifications-container {
                    margin: 0 auto;
                    width: 600px;
                    height: auto;
                    font-size: 0.875rem;
                    line-height: 1.25rem;
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;
                  }
              
                  .flex {
                    display: flex;
                  }
              
                  .flex-shrink-0 {
                    flex-shrink: 0;
                  }
              
                  .success {
                    padding: 1rem;
                    border-radius: 0.375rem;
                    background-color: rgb(240 253 244);
                  }
              
                  .succes-svg {
                    color: rgb(74 222 128);
                    width: 1.25rem;
                    height: 1.25rem;
                  }
              
                  .success-prompt-wrap {
                    margin-left: 0.75rem;
                  }
              
                  .success-prompt-heading {
                    font-weight: bold;
                    color: rgb(22 101 52);
                  }
              
                  .success-prompt-prompt {
                    margin-top: 0.5rem;
                    color: rgb(21 128 61);
                  }
              
                  .text {
                    font-weight: bold;
                    font-size: 24px;
                    color: rgb(22 101 52);
                  }
            </style>
        </head>
        <body>
        <div class="notifications-container">
        <div class="success">
          <div class="flex">
            <div class="flex-shrink-0">
              <svg
                class="succes-svg"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                aria-hidden="true"
              >
                <path
                  fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                  clip-rule="evenodd"
                ></path>
              </svg>
            </div>
            <div class="success-prompt-wrap">
              <p class="success-prompt-heading">${email} Welcome!</p>
              <div class="success-prompt-prompt">
                <p>验证码</p>
                <p class="text">${code}</p>
                <p>请在3分钟内完成验证</p>
                <p class="text">Thanks!</p>
                <p><(￣︶￣)↗[GO!]</p>
              </div>
            </div>
          </div>
        </div>
      </div>
        </body>
        </html>
    `;
};
